<template>
	<div class="createTest testPaper" @click.self="edit(-1,-1)">
		<div class="w">
			<div class="header"></div>
			<!-- 试卷信息 -->
			<div class="title">
				<el-input v-model="testData.examName" class="testName" placeholder="请输入内容"></el-input>
				<ul>
					<li class="test-info">出卷者: {{ testData.creatorName }}</li>
					<li class="test-info"> 答题时间:
						<el-input-number v-model="testData.time" controls-position="right" :step="10" size="mini" :min="1" /> 分钟 </li>
					<li class="test-info">题目数量: 共 {{ topicNavIndex_mixin(4, sortedTopics[4].topic_content.length - 1) }} 道</li>
					<li class="test-info">总分: {{ totalScore }} 分</li>
					<li class="test-info"> 及格分数:
						<el-input-number v-model="testData.passMark" controls-position="right" :step="1" size="mini" :min="0" :max="totalScore" />
						分 </li>
					<!-- <li class="test-info">所属班级: {{ testData.classes_name }}</li> -->
					<li style="clear:both;"></li>
				</ul>
				<ul>
					<li class="test-info">允许学生切换页面次数:
						<el-input-number v-model="testData.switchPage" controls-position="right" :step="1" size="mini" :min="-1" />
						<el-tooltip class="item" effect="light" content="-1表示允许学生无限次切换页面" placement="bottom-start">
							<i class="el-icon-question"></i>
						</el-tooltip>
					</li>
					<li class="test-info">是否允许复制文本: <el-switch v-model="testData.permitCopy" active-color="#409EFF" inactive-color="#ccc"></el-switch>
					</li>
					<li class="test-info">是否打乱题目顺序: <el-switch v-model="testData.disruptOrder" active-color="#409EFF" inactive-color="#ccc"></el-switch>
					</li>
					<li class="test-info">是否自动评分: <el-switch v-model="testData.autoMack" active-color="#409EFF" inactive-color="#ccc"></el-switch>
						<el-tooltip class="item" effect="light" content="取消自动评分系统依然会自动批改,但会先显示分数为0分,等待教师审批确认" placement="bottom-start">
							<i class="el-icon-question"></i>
						</el-tooltip>
					</li>
					<li class="fr">
						<el-button size="mini" type="primary" @click="submit()">保存试卷 </el-button>
						<el-button size="mini" type="primary" @click="selectTopics()">从题库选题</el-button>
						<el-button size="mini" type="primary" @click="copy()">复制试卷</el-button>
					</li>
					<li style="clear:both;"></li>
				</ul>
			</div>
			<div class="test-content" @click.self="edit(-1,-1)">
				<div class="topics">
					<!-- 所有题目 -->
					<div class="topic" v-for="(s_topics, index) in sortedTopics" :key="index">
						<!-- 按类型分类好的题目 -->
						<div class="topicsType" v-if="s_topics.topic_content.length != 0">
							<div class="bigQuestionName">
								<h4> {{ bigQuestionName_mixin(s_topics.type, index) }} </h4><!-- 题目类型名称 -->
								<div class="allScore">
									<el-button :class="s_topics.showAllScore? 'active':''" type="text" @click="s_topics.showAllScore = !s_topics.showAllScore">统一设置题目分数
									</el-button>
									<el-input v-if="s_topics.showAllScore" @change="setAllScore($event,s_topics.type)" v-model="s_topics.score"
									 placeholder="请输入分数"></el-input>
								</div>
							</div>
							<div v-for="(t, tIndex) in s_topics.topic_content" :key="tIndex" @click="edit(s_topics.type,tIndex)">
								<div class="topic-content" :class="isEdit(s_topics.type,tIndex)?'isEdit':''">
									<!-- 题目 -->
									<div class="question">
										<strong class="question_nunber">{{ topicNavIndex_mixin(s_topics.type, tIndex) }}、</strong>
										<span v-if="isEdit(s_topics.type,tIndex)">
											<el-input v-model="t.question" type="textarea" autosize></el-input>
										</span>
										<span v-else>{{ t.question }}</span>
									</div>
									<!-- 单项选择题 -->
									<div class="userAnswer" v-if="s_topics.type==0">
										<div class="radios">
											<el-radio v-for="(item, index) in t.choice" :key="index" v-model="t.correctAnswer" :label="item">
												<span class="topicNavIndex">{{ String.fromCharCode(65 + index) }}、</span>
												<span v-if="editInedx.type==0&&editInedx.index==tIndex">
													<el-input v-model="t.choice[index]" type="textarea" autosize></el-input>
													<el-button class="delRadios" size="mini" type="danger" v-if="t.choice.length>2" @click="delRadios(0,tIndex,index)">
														<i class="el-icon-close"></i>
													</el-button>
												</span>
												<span v-else>{{ item }}</span>
											</el-radio>
										</div>
										<el-button class="addRadios" size="mini" icon="el-icon-plus" @click="addRadios(s_topics.type,tIndex)">添加选项
										</el-button>
									</div>
									<!-- 多项选择题 -->
									<div class="userAnswer" v-if="s_topics.type==1">
										<div class="checkbox">
											<el-checkbox-group v-model="t.correctAnswer">
												<el-checkbox :label="item" v-for="(item, index) in t.choice" :key="index">
													<span class="topicNavIndex">{{ String.fromCharCode(65 + index) }}、</span>
													<span v-if="editInedx.type==1&&editInedx.index==tIndex">
														<el-input v-model="t.choice[index]" type="textarea" autosize></el-input>
														<el-button class="delRadios" size="mini" type="danger" v-if="t.choice.length>2" @click="delRadios(1,tIndex,index)">
															<i class="el-icon-close"></i>
														</el-button>
													</span>
													<span v-else>{{ item }}</span>
												</el-checkbox>
											</el-checkbox-group>
										</div>
										<el-button class="addRadios" size="mini" icon="el-icon-plus" @click="addRadios(s_topics.type,tIndex)">添加选项
										</el-button>
									</div>
									<!-- 判断题 -->
									<div class="userAnswer" v-if="s_topics.type==2">
										<div class="TrueOrFalse">
											<el-radio v-model="t.correctAnswer" label="true">正确</el-radio>
											<el-radio v-model="t.correctAnswer" label="false">错误</el-radio>
										</div>
									</div>
									<!-- 填空题 -->
									<div class="userAnswer" v-if="s_topics.type==3">
										<el-button size="mini" @click="addFillSymbol(tIndex)">插入填空符</el-button>
										<span style="font-size:12px;">(三个下划线为一个填空符)</span>
										<div class="fillInBlank">
											<div v-for="(q, index) in fillSymbolStr(t.question)" :key="index">
												<el-input type="textarea" autosize placeholder="请回答" v-if="index!=fillSymbolStr(t.question).length-1"
												 v-model="t.correctAnswer[index]">
												</el-input>
											</div>
										</div>
									</div>
									<!-- 简答题 -->
									<div class="userAnswer" v-if="s_topics.type==4">
										<div class="text">
											<strong>&nbsp;&nbsp;关键字</strong>
											<div v-for="(q, index) in t.correctAnswer" :key="index">
												<el-input type="textarea" autosize placeholder="请输入关键字" v-model="t.correctAnswer[index]"></el-input>
											</div>
											<el-button class="addRadios" size="mini" icon="el-icon-plus" @click="addKeyWord(tIndex)">添加关键字 </el-button>
											<!-- {{t.correctAnswer}} -->
										</div>
									</div>
									<!-- 正确答案 -->
									<p class="correctAnswer" style="font-size: 14px">
										<strong>正确答案: </strong>
										{{ t.correctAnswer }}
									</p>
									<div>
										<div class="difficulty" style="margin-top: 8px">
											<strong>难度: </strong>
											<span v-if="isEdit(s_topics.type,tIndex)">
												<el-select v-model="t.difficulty" placeholder="请选择" size="mini">
													<el-option v-for="item in topicDifficultyOptions" :key="item" :label="item" :value="item">
													</el-option>
												</el-select>
											</span>
											<span v-else>{{ t.difficulty }}</span>
										</div>
										<div class="topicScore">
											<strong>分值: </strong>
											<span v-if="isEdit(s_topics.type,tIndex)">
												<el-input-number v-model="t.score" controls-position="right" :step="1" size="mini" :min="0" />
											</span>
											<span v-else>{{ t.score }}</span> (分) </div>
										<div class="required">
											<strong>是否必填: </strong>
											<el-switch v-model="t.required" active-color="#409EFF" inactive-color="#ccc"></el-switch>
										</div>
									</div>
									<div class="analysis">
										<strong>题目解析: </strong>
										<span v-if="isEdit(s_topics.type,tIndex)">
											<el-input v-model="t.analysis" type="textarea" autosize></el-input>
										</span>
										<span v-else>{{ t.analysis }}</span>
									</div>
								</div>
								<el-divider></el-divider>
							</div>
						</div>
					</div>
				</div>
				<!-- 题目导航 -->
				<div class="topic-nav" :class="isFixed ? 'isFixed' : ''" :style="topic_nav_style">
					<!-- 工具 -->
					<div class="tool">
						<transition name="el-zoom-in-top">
							<div v-show="!isEdit(-1,-1)">
								<el-button icon="el-icon-top" title="上移" @click="moveTopic(-1)"></el-button>
								<el-button icon="el-icon-bottom" title="下移" @click="moveTopic(1)"></el-button>
								<transition name="el-zoom-in-center">
									<div v-show="true" style="display:inline-block;margin:0 10px">
										<el-button icon="el-icon-picture-outline" title="上传图片" @click="moveDowmTopic()"></el-button>
									</div>
								</transition>
								<el-button type="danger" icon="el-icon-delete" title="删除" @click="delTopic()"></el-button>
							</div>
						</transition>
					</div>
					<!-- 导航按钮 -->
					<ul style="list-style-type:none" v-for="(topics, Topics_index) in sortedTopics" :key="Topics_index">
						<li class="topic-nav-item" @click.self="edit(-1,-1)">
							<div class="nav-title">{{ topicTypeName_mixin(topics.type) }}</div>
							<span class="topic-nav-button" :class="editInedx.type==topics.type" v-for="(item , index) in topics.topic_content"
							 :key="index" @click="topicNav(Topics_index,index)">
								{{ topicNavIndex_mixin(Topics_index, index) }}
							</span>
							<span class="topic-nav-button" @click="newTopic(topics.type)">
								<i class="el-icon-plus"></i>
							</span>
						</li>
					</ul>
				</div>
				<div style="clear:both;"></div>
			</div>
			<div>
				<el-backtop :visibility-height="60">
					<i class="el-icon-caret-top"></i>
				</el-backtop>
			</div>
		</div>
		<el-dialog :title="selectTitle" :visible.sync="show" :close-on-click-modal="false" width="800px">
			<GetFromTopicBank v-if="show" :show.sync="show" :topics.sync="topics" @getData="addTopicsFromTopicBank()"></GetFromTopicBank>
		</el-dialog>
	</div>
</template>
<script>
	
	import testPaperMixin from "@/mixins/testPaper-mixin";
	import axios from "@/utils/axiosutils.js"
	import store from '@/vuex'
	import GetFromTopicBank from "./components/GetFromTopicBank.vue"
	export default {
		name: "editExam",
		mixins: [testPaperMixin],
		data() {
			return {
				show: false,
				selectTitle: "",
				topics: [],
				//按题目类型分类好的题目数据
				//题目类型==>  0:单选题  1:多选题  2:判断题  3:填空题  4:简答题
				sortedTopics: [{
					type: 0,
					topic_content: [],
					score: 0,
					showAllScore: false
				}, {
					type: 1,
					topic_content: [],
					score: 0,
					showAllScore: false
				}, {
					type: 2,
					topic_content: [],
					score: 0,
					showAllScore: false
				}, {
					type: 3,
					topic_content: [],
					score: 0,
					showAllScore: false
				}, {
					type: 4,
					topic_content: [],
					score: 0,
					showAllScore: false
				}, ],
				// //试卷数据
				testData: {
					examId: -1,
					examName: "点击编辑试卷名称", //试卷名称
					time: 60, //答题时间
					topicNum: 0, //题目数量
					passMark: 0,
					autoMack: 1, //是否自动评分
					permitCopy: 1, //是否允许复制文本
					repeatTest: 1, //用户可重复考试次数
					switchPage: -1,
					disruptOrder: 0, //是否打乱题目顺序
					creatorName: this.$store.getters.getuname,
					totalScore:0
				},
				//用户数据
				userData: {
					id: "",
					name: "李子建",
				},
				//当前编辑的题目索引
				editInedx: {
					type: "-1",
					index: "-1",
					input: "-2",
				},
				topicDifficultyOptions: ["简单", "中等", "困难"], //题目难度选项
				//侧导航栏是否悬浮
				isFixed: false,
				topic_nav_style: "top:0px",
			};
		},
		components: {
			GetFromTopicBank
		},
		computed: {
			params() {
				return this.$route.query;
			},
			//试卷总分
			totalScore() {
				var score = 0;
				this.sortedTopics.forEach((element) => {
					element.topic_content.forEach((item) => {
						score += parseInt(item.score);
					});
				});
				this.testData.totalScore = score;
				return score;
			},
			//按填空符(三个下划线)划分字符串
			fillSymbolStr() {
				return function(str) {
					var q = str.split("___");
					return q;
				};
			},
		},
		created() {
			let type = this.$route.query.type;
			if (type === "add") {}
			if (type === "edit") {
				this.getTestPaper();
			}
			
		},
		mounted() {
			// 监听滚动事件，然后用handleScroll这个方法进行相应的处理
			window.addEventListener("scroll", this.handleScroll);
		},
		methods: {
			// 复制试卷
			copy() {
				this.testData.examName = "点击编辑试卷名称";
				this.$router.push({
					name: "createExam",
					params: {
						type: "add",
						data: this.testData
					},
				});
				this.$message.success("复制成功");
			},
			//提交试卷
			submit() {
				/*  处理题目信息 */
				var topicData = [];
				this.sortedTopics.forEach((element) => {
					if (element.topic_content.length != 0) {
						element.topic_content.forEach((item) => {
							//深拷贝
							var newItem = JSON.parse(JSON.stringify(item));
							topicData.push(newItem);
						});
					}
				});
				//处理选择题选项
				topicData.forEach((item) => {
					var choice = "";
					item.choice.forEach((c) => {
						choice += c + "\n";
					});
					item.choice = choice.slice(0, -1);
					item.required = item.required === true ? 1 : 0
				});
				//处理正确答案
				for (let item of topicData) {
					if (!item.correctAnswer || item.correctAnswer == "") {
						this.$message.warning("有题目未选答案");
						return
					}
					if (item.correctAnswer instanceof Array) {
						if (item.correctAnswer.length === 1 && item.correctAnswer[0] == "") {
							this.$message.warning("有题目未选答案");
							return
						}
						var correctAnswer = "";
						item.correctAnswer.forEach((c) => {
							correctAnswer += c + "\n";
						});
						item.correctAnswer = correctAnswer.slice(0, -1);
					}
				};
				//处理试卷信息
				var testData = JSON.parse(JSON.stringify(this.testData));
				testData.topicTchDTOList = topicData;
				testData.creatorName = this.$store.getters.getuname;
				testData.topicNum = topicData.length;
				testData.autoMack = testData.autoMack == true ? "1" : "0";
				testData.disruptOrder = testData.disruptOrder == true ? "1" : "0";
				testData.permitCopy = testData.permitCopy == true ? "1" : "0";
				
				var request = { ...testData,
				};
				if (this.params.type === "edit") {
					var url = "exam/updateTestPaper";
				} else {
					var url = "exam/createTestPaper";
				}
				let jsonData = JSON.stringify(request);
				console.log(jsonData)
				axios.post(url, res => {
					this.$message.success(res.message);
					if (url == "exam/createTestPaper") {
						this.$router.push("/myTest");
					}
				}, {
					"jsonData": jsonData
				})
				// this.$http.post(url, request).then((res) => {
				//   if (res.code == 200) {
				//     this.$message.success(res.msg);
				//     if (url == "exam/createTestPaper") {
				//       this.$router.push("/testPaperTch/" + res.data.examId);
				//     }
				//   }
				// });
			},
			//编辑试卷---获取试卷信息
			async getTestPaper() {
				let params = {
					examId: this.$route.query.tp_id,
				};
				await axios.get("exam/getTestPaperByTp_id", res => {
					var testData = res.obj;
					//处理试卷的题目数据
					testData.topicTchDTOList.forEach((item) => {
						if (item.topicType == 4 || item.topicType == 3 || item.topicType == 1) {
							item.correctAnswer = item.correctAnswer.split(/[\n]/g);
						}
						//按换行符分割字符串
						item.choice = item.choice.split(/[\n]/g);
						item.required = item.required === 1 ? true : false;
					});
					testData.autoMack = testData.autoMack == 1 ? true : false;
					testData.disruptOrder = testData.disruptOrder == 1 ? true : false;
					testData.permitCopy = testData.permitCopy == 1 ? true : false;
					this.testData = testData;
					console.log("testData ==> ", this.testData);
					//按题目类型分类并保存
					var topics = this.testData.topicTchDTOList;
					for (let i = 0; i < topics.length; i++) {
						for (let item of this.sortedTopics) {
							if (topics[i].topicType == item.type) {
								item.topic_content.push(topics[i]);
							}
						}
					}
				}, params)
			},
			//统一设置题目分数
			setAllScore(val, type) {
				val = parseInt(val);
				this.sortedTopics[type].topic_content.forEach((item) => {
					item.score = val;
				});
			},
			//设置当前编辑中的题目
			edit(type, index) {
				if (this.editInedx.type == type && this.editInedx.index == index) {
					console.log("拦截");
					return;
				}
				this.editInedx.type = type;
				this.editInedx.index = index;
			},
			//是否在编辑状态
			isEdit(type, index, input = -2) {
				if (this.editInedx.type == type && this.editInedx.index == index && this.editInedx.input == input) {
					return true;
				} else {
					return false;
				}
			},
			//滚动事件
			handleScroll() {
				let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; // 滚动条偏移量
				if (scrollTop > 154) {
					this.topic_nav_style = "top:" + (scrollTop + 20) + "px";
					this.isFixed = true;
				} else {
					this.isFixed = false;
				}
			},
			//点击题号导航跳转
			topicNav(type, index) {
				var totalIndex = this.topicNavIndex_mixin(type, index) - 1;
				setTimeout(() => {
					document.getElementsByClassName("topic-content")[totalIndex].scrollIntoView({
						behavior: "smooth"
					});
				}, 100);
				this.edit(type, index);
			},
			//新建题目
			newTopic(type) {
				this.sortedTopics[type].topic_content.push({
					u_id: this.userData.id,
					topicType: type,
					question: "这是我新建的题目",
					choice: ["选项1", "选项2", "选项3", "选项4"],
					correctAnswer: [],
					analysis: "这是答案分析",
					difficulty: "中等",
					score: 10,
					subjectId: "1",
					required: true
				});
				var time = setTimeout(() => {
					this.topicNav(type, this.sortedTopics[type].topic_content.length - 1);
					clearInterval(time);
				}, 100);
			},
			//删除当前正在编辑的题目
			delTopic() {
				var type = this.editInedx.type;
				var index = this.editInedx.index;
				this.sortedTopics[type].topic_content.splice(index, 1);
			},
			//上移或下移当前正在编辑的题目  -1:上移   1:下移
			moveTopic(n) {
				var type = this.editInedx.type;
				var index = this.editInedx.index;
				if (index == 0 && n == -1) {
					console.log("拦截");
					return;
				}
				if (index == this.sortedTopics[type].topic_content.length - 1 && n == 1) {
					console.log("拦截");
					return;
				}
				var topic = this.sortedTopics[type].topic_content[index];
				var upTopic = this.sortedTopics[type].topic_content[index + n];
				this.sortedTopics[type].topic_content.splice(index, 1, upTopic);
				this.sortedTopics[type].topic_content.splice(index + n, 1, topic);
				var time = setTimeout(() => {
					this.topicNav(type, index + n, 10);
					clearInterval(time);
				}, 100);
			},
			//删除选项
			delRadios(type, tIndex, index) {
				this.sortedTopics[type].topic_content[tIndex].choice.splice(index, 1);
			},
			//添加选项
			addRadios(type, tIndex) {
				var choiceLength = this.sortedTopics[type].topic_content[tIndex].choice.length + 1;
				if (choiceLength > 10) {
					this.$message({
						message: "不能再添加选项了喔!",
						type: "warning",
					});
					return;
				}
				this.sortedTopics[type].topic_content[tIndex].choice.push("选项" + choiceLength);
			},
			//添加填空符
			addFillSymbol(tIndex) {
				var str = this.sortedTopics[3].topic_content[tIndex].question;
				// console.log(str);
				this.sortedTopics[3].topic_content[tIndex].question = str + "___";
			},
			//添加关键字
			addKeyWord(tIndex) {
				this.sortedTopics[4].topic_content[tIndex].correctAnswer.push("");
				console.log(this.sortedTopics[4].topic_content[tIndex]);
			},
			//从题库选题
			selectTopics() {
				this.selectTitle = "从题库中选择";
				this.show = true;
			},
			addTopicsFromTopicBank() {
				if (this.topics != null) {
					this.topics.forEach((item) => {
						if (item.topicType == 4 || item.topicType == 3 || item.topicType == 1) {
							item.correctAnswer = item.correctAnswer.split(/[\n]/g);
						}
						//按换行符分割字符串
						item.choice = item.choice.split(/[\n]/g);
						item.required = item.required === 1 ? true : false;
					});
					for (let item of this.topics) {
						this.sortedTopics[item.topicType].topic_content.push({
							u_id: this.userData.id,
							topicType: item.topicType,
							question: item.question,
							choice: item.choice,
							correctAnswer: item.correctAnswer,
							analysis: item.analysis,
							difficulty: item.difficulty,
							score: item.score,
							subjectId: "",
							required: item.required
						})
					}
				}
			}
		},
	};
</script>
<style lang="less" scoped>
	#app {
		overflow: visible;
		background: #d3ebff;
	}

	html {
		background: #d3ebff;
	}

	.w {
		position: relative;
		width: 1200px;
		margin: 0 auto;
		padding: 0 10px;
		box-sizing: border-box;
		padding-bottom: 40px;
	}

	.testPaper .title,
	.topics,
	.topic-nav {
		background: #fafafa;
		border-radius: 2px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
	}

	.testPaper {
		.test-content {}

		.topics {
			float: left;
			width: 812px;
			box-sizing: border-box;
			padding: 16px;
			margin-bottom: 30px;
		}
	}

	.testPaper .title {
		// height: 128px;
		padding: 10px 30px 10px 30px;
		margin-bottom: 10px;
		font-weight: 330;

		.testName .el-input__inner {
			margin: 0 0 20px 40px;
			border: none;
			background: rgba(255, 255, 255, 0);
			font-size: 20px;
			color: #333;
			font-weight: bold;
			text-decoration: underline;
		}

		ul {
			margin-bottom: 10px;
			list-style: none;
		}

		ul::after {
			content: '';
			display: block;
			clear: both;
		}

		.test-info {
			float: left;
			margin-right: 40px;

			i {
				color: #333;
				position: relative;
				top: 2px;
				left: 2px;
			}
		}

		.test-info:last-child {
			margin: 0;
		}

		.user-info {
			float: left;
			margin-top: 10px;
			margin-right: 40px;
		}

		.el-input-number {
			width: 88px;
		}

		.el-input-number.is-controls-right .el-input__inner {
			padding-left: 0px;
			padding-right: 28px;
		}
	}

	.testPaper .title.fixed {
		position: fixed;
		z-index: 999;
		top: 0;
		width: 1180px;
		box-sizing: border-box;
		padding: 14px 30px 0px 30px;
	}

	.topics .topic {
		.bigQuestionName {
			position: relative;
			display: flex;
			justify-content: space-between;
		}

		.bigQuestionName h4 {
			margin: 20px 0;
		}

		.bigQuestionName .allScore {
			margin: 20px 0;
		}

		.bigQuestionName .allScore button {
			height: 28px;
		}

		.bigQuestionName .allScore button.active {
			//background: #666;
			color: #4373c1;
			//border: 1px solid ;
		}

		.bigQuestionName .allScore .el-input {
			position: absolute;
			top: -30px;
			right: 0;
			width: 120px;
		}

		.bigQuestionName .allScore .el-input::before {
			content: '';
			display: inline-block;
			position: absolute;
			bottom: -4px;
			left: 7px;
			transform: rotate(-45deg);
			width: 8px;
			height: 8px;
			border: 1px solid transparent;
			border-left: 1px solid #DCDFE6;
			border-bottom: 1px solid #DCDFE6;
		}

		.bigQuestionName .allScore .el-input::after {
			content: '';
			display: inline-block;
			position: absolute;
			bottom: -3px;
			left: 8px;
			transform: rotate(-45deg);
			border: 4px solid transparent;
			border-left: 4px solid #fff;
			border-bottom: 4px solid #fff;
		}

		.topic-content {
			position: relative;
			padding: 10px 8px;
			border-radius: 8px;
		}

		.topic-content.isEdit {
			// background: #f5f5f5;
		}

		.topic-content ._location {
			position: absolute;
			top: -50px;
			width: 10px;
			height: 10px;
		}

		.required-symbol {
			color: red;
		}

		.question {
			margin-bottom: 20px;
			font-size: 16px;
			line-height: 26px;
			color: #333;
			//font-weight: 330;
		}

		.question .el-textarea {
			width: 730px;
		}

		.el-radio,
		.el-checkbox {
			width: 600px;
			margin-bottom: 2px;
		}

		.userAnswer .el-textarea {
			width: 500px;
		}

		.userAnswer .radios span {
			font-weight: 330;
		}

		.userAnswer .topicNavIndex {
			display: inline-block;
			width: 30px;
		}

		.score {
			float: right;
		}

		.addRadios {
			margin: 4px 0 0 30px;
		}

		.delRadios.el-button {
			position: relative;
			top: -2px;
			padding: 4px 4px;
			margin-left: 12px;
		}

		.correctAnswer {
			padding-left: 12px;
			padding-top: 10px;
		}

		.topicScore,
		.difficulty,
		.required {
			display: inline-block;
			box-sizing: border-box;
			width: 33%;
			padding: 0 12px;
			margin-bottom: 10px;
			font-size: 14px;
		}

		.difficulty .el-input {
			width: 120px;
		}

		.analysis,
		.correct_answer {
			padding: 0 10px;
			font-size: 14px;
		}

		.el-radio,
		.el-checkbox {
			display: block;
			margin-left: 20px;
			color: #222;
		}

		.el-radio__label,
		.el-checkbox__label {
			font-size: 16px;
			line-height: 30px;
			word-wrap: break-word;
			white-space: normal;
		}

		.el-checkbox__input {
			float: left;
			margin-top: 8px;
		}

		.fillInBlank .el-textarea {
			width: 50%;
			margin-left: 30px;
			margin-top: 10px;
		}

		.text .el-textarea {
			width: 400px;
			margin: 4px 0 0 30px;
		}

		.text .addRadios {
			margin-bottom: 10px;
		}

		.newTopic {
			margin: 10px 0;
			padding: 10px 0;
			text-align: center;
			color: #64a9e3;
			border: 1px solid #64a9e3;
			cursor: pointer;
		}
	}

	.testPaper .topic-nav {
		float: right;
		box-sizing: border-box;
		width: 356px;
		min-height: 300px;
		padding: 14px;

		.tool {
			display: flex;
			justify-content: space-between;
			width: 200px;
			height: 30px;
			margin: 0 auto;

			.el-button {
				padding: 6px 10px;
			}
		}

		.topic-nav-describe {
			width: 140px;
			margin: 0 auto;
			font-size: 14px;

			.topic-nav-but {
				display: inline-block;
				position: relative;
				top: 4px;
				width: 16px;
				height: 16px;
				color: #64a9e3;
				border: 1px solid #64a9e3;
				border-radius: 2px;
			}

			.topic-nav-but.hasAnswer {
				background-color: #64a9e3;
				color: #fff;
			}

			.space {
				display: inline-block;
				width: 20px;
			}
		}

		.topic-nav-item {
			margin-bottom: 10px;
		}

		.nav-title {
			width: 50px;
			font-size: 14px;
			margin-left: 10px;
		}

		.topic-nav-button {
			display: inline-block;
			width: 30px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			margin: 10px 6px 0 8px;
			color: #64a9e3;
			border: 1px solid #64a9e3;
			border-radius: 2px;
			cursor: pointer;
			transition: 0.5s;
		}

		.topic-nav-button.hasAnswer {
			background-color: #64a9e3;
			color: #fff;
		}
	}

	.topic-nav.isFixed {
		position: absolute;
		top: 154px;
		right: 10px;
		// transform: 0.5s;
	}

	.testPaper .back-top {
		position: fixed;
		bottom: 50px;
		right: 100px;
		background: #fff;
		color: #333;
		font-size: 18px;
		border-radius: 2px;
		padding: 6px 8px;
		cursor: pointer;
	}

	.el-radio.is-disabled.is-checked .el-radio__input.is-disabled+span.el-radio__label,
	.el-checkbox.is-disabled.is-checked .el-checkbox__input.is-disabled+span.el-checkbox__label {
		color: #409EFF;
	}

	.topic-nav-button.correct,
	.topic-nav-but.correct {
		background: #02c39a !important;
		border: 1px solid #02c39a !important;
		color: #fff !important;
	}

	.topic-nav-button.error,
	.topic-nav-but.error {
		background: #ff6b6b;
		border: 1px solid #ff6b6b !important;
		color: #fff !important;
	}

	.test-content.publishScore .el-radio.is-disabled.is-checked .el-radio__input.is-disabled+span.el-radio__label,
	.test-content.publishScore .el-checkbox.is-disabled.is-checked .el-checkbox__input.is-disabled+span.el-checkbox__label {
		color: #ff6b6b;
	}

	.el-radio.is-disabled.is-checked.correct .el-radio__input.is-disabled+span.el-radio__label,
	.el-checkbox.is-disabled.is-checked.correct .el-checkbox__input.is-disabled+span.el-checkbox__label {
		color: #02c39a !important;
	}

	.topic-content .correct .el-radio__label {
		color: #02c39a !important;
	}

	.testPaper .forbid_copy {
		-moz-user-select: none;
		/*火狐*/
		-webkit-user-select: none;
		/*webkit浏览器*/
		-ms-user-select: none;
		/*IE10*/
		-khtml-user-select: none;
		/*早期浏览器*/
		user-select: none;
	}
</style>
